<template>
	<view class="contanter">
		<view class="activeContent">
			<view class="listContent">
				<view class="activeIcon">
					<image src="/static/image/activeIcon.png" mode="widthFix"></image>
				</view>
				<view class="listTitle">
					<view style="width: 15%;">排行</view>
					<view style="width: 20%;">用户名称</view>
					<view style="width: 20%;">玩家号</view>
					<view style="width: 20%;">积分</view>
					<view style="width: 20%;">奖励</view>
				</view>
				<view class="list">
					<view class="item" v-for="item,index in list" :key="item.inviteCode">
						<view class="itemSort">
							<view v-show="index<3">
								<image :src="'/static/image/winIcon'+index+'.png'" mode="widthFix"></image>
							</view>
							<view v-show="index>2" style="margin: 0 auto;">
								<!-- <u--text :text="" size="28"></u--text> -->
								{{index+1}}
							</view>
						</view>
						<view class="userNickName ">
							<uni-tooltip :size="12" placement="top" :content="item.nickName">
								<view class="textOver">{{item.nickName}}</view>
							</uni-tooltip>
							<!-- <u--text :text="item.nickName" size="28" :lines="1" lineHeight="28" align="center"></u--text> -->

						</view>
						<view class="userInviteCode textOver">
							<!-- <u--text :text="item.inviteCode" size="28" align="center"></u--text> -->
							{{item.inviteCode}}
						</view>
						<view class="userTotalPayMoney textOver">
							<!-- <u--text :text="item.totalPayMoney" size="28" align="center"></u--text> -->
							{{item.totalPayMoney}}
						</view>
						<view class="prizeImage">
							<image @click="viewImage(item.prizeImg)" :src="item.prizeImg" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<sys-weixin :isboser="true" :router="routerLink" />
	</view>
</template>

<script>
	import {
		queryUserPayRankList
	} from '@/api/active.js'
	export default {
		data() {
			return {
				list: [],
				routerLink: "",
			};
		},
		onLoad() {
			this.getList()
			this.routerLink = window.location.href;
		},
		methods: {
			getList() {
				queryUserPayRankList().then((res) => {
					// console.log(res);
					this.list = res.data.dataInfo
				})
			},
			viewImage(image) {
				uni.previewImage({
					urls: [image],
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.contanter {
		// box-sizing: border-box;
		width: 750rpx;
		min-height: 100vh;
		background-image: url('/static/image/active1Bg.png');
		background-color: #70E4FF;
		background-clip: border-box;
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding-bottom: 20rpx;

		// padding-top: 828rpx;
		.activeContent {
			// box-sizing: border-box;
			padding-top: 828rpx;
		}
	}

	.listContent {
		width: 702rpx;
		margin: 0 auto;
		background-image: url('/static/image/listBg.png');
		background-clip: border-box;
		background-size: 100% auto;
		background-repeat: no-repeat;
		padding: 12rpx 20rpx;

		.activeIcon {
			width: 380rpx;
			margin: 0 auto;

			image {
				width: 100%;
			}
		}

		.listTitle {
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-size: 28rpx;
			padding-bottom: 22rpx;
			border-bottom: 4rpx solid #EBEBEB;
			color: #000;

			view {
				text-align: center;
			}
		}

		.list {
			.item {
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				font-size: 28rpx;
				text-align: center;
				padding: 15rpx 0 12rpx;
				border-bottom: 4rpx solid #EBEBEB;
				font-size: 24rpx;
				color: #000;

				.itemSort {
					width: 15%;

					image {
						width: 50rpx;
					}
				}

				.prizeImage {
					width: 20%;

					image {
						width: 66rpx;
						height: 88rpx;
					}
				}

				.userNickName {
					width: 20%;
					text-align: left;

				}

				.userInviteCode {
					width: 20%;
					text-align: center;
				}

				.userTotalPayMoney {
					width: 20%;
					text-align: center;
				}

				&:last-child {
					border-bottom: unset;
				}
			}
		}
	}

	.textOver {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>